<template>
	<view class="content">
		<view>
			<label>要选中的结果：</label>
			<input type="text" v-model="result" />
		</view>
		<view class="turntable">
			<view class="buton-choujiang" @click="StartRotate()"></view>
			<view class="turntable_card" v-for="(item, index) in jackpot" :class="chooseCard.id == item.id ? 'grey' : 'reds'">{{ item.text }}</view>
		</view>
	</view>
</template>
id
<script>
export default {
	data() {
		return {
			chooseCard: '', //当前选中的卡片
			result: '',//后台返回当前用户要选中那个
			roundCount: 3,//要旋转几圈
			jackpot: [
				{ id: '1', text: '猫1' },
				{ id: '2', text: '猫2' },
				{ id: '3', text: '猫3' },
				{ id: '4', text: '猫4' },
				{ id: '5', text: '猫5' },
				{ id: '6', text: '猫6' },
				{ id: '7', text: '猫7' },
				{ id: '8', text: '猫8' }
			]
		};
	},
	onLoad() {},
	methods: {
		//开始旋转
		StartRotate() {
			console.log('111');
			let roundIdIndex = 0; //第一个旋转ID的下标
			let Round = 1; //转的圈数
			let that = this;
			let time = 400;
			//业务逻辑层
			let StartRound = () => {
				let obj = that.jackpot[roundIdIndex]; //通过下标找到数据
				if (roundIdIndex >= that.jackpot.length) {
					Round++;
					console.log(`第${Round}圈`);
					roundIdIndex = 0;
					if (obj == undefined) obj = that.jackpot[0];
				}
				that.chooseCard = obj;
				console.log('当前选中数据', obj.id);
				roundIdIndex++;
				return obj;
			};
			//条件退出层
			let conditionExic = condition => {
				let flag = true;
				if (condition.id === that.result && Round == that.roundCount) {
					flag = false;
				}
				return flag;
			};
			//时间循环层
			/*
			func业务逻辑（带返回值）
			func2 判断（返回值为true/false）(参数为func获取到的值)
			func3 停止循环之后干的事情 比如弹框等
			*/
			let runTimerOut = (Func,func2,CallBack) => {
				let timeOut = setTimeout(() => {
					console.log(typeof Func)
					if(typeof Func!="function"||typeof func2!="function" ||typeof CallBack!="function")
						throw new  Error('当前入参不是funcation')
					let obj = Func();
					if (roundIdIndex == that.jackpot.length) time = time-50
					//清除定时器
					console.log(time)
					clearTimeout(timeOut);
					if(time<=0)return;
					if (!func2(obj)) {
						CallBack();
						// uni.showToast({
						// 	title: '选中内容' + obj.id,
						// 	icon: 'success',
						// 	duration: 850
						// });
					} else {
						runTimerOut(Func,func2,CallBack);
					}
				}, time);
			};
			//开始抽奖
			runTimerOut(StartRound,conditionExic,()=>{
				uni.showToast({
							title: '选中内容' + that.chooseCard.id,
							icon: 'success',
							duration: 850
						})}
			);
		}
	}
};
</script>

<style>
.turntable {
	width: 398px;
	border: 1px solid black;
	height: 400px;
	display: flex;
	flex-wrap: wrap;
	position: relative;
}

.turntable_card {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 12px 16px;
}
.turntable_card:nth-child(5) {
	position: relative;
	left: 66%;
}
.turntable_card:nth-child(6) {
	position: relative;
	left: 33%;
	top: 33%;
}

.turntable_card:nth-child(7) {
	position: relative;
	left: -33%;
	top: 33%;
}

.turntable_card:nth-child(8) {
	/* margin-left: 37%; */
}
.turntable_card:nth-child(9) {
	top: -33%;
	left: -33%;
	position: relative;
}
.buton-choujiang {
	background-color: blueviolet;
	width: 100px;
	height: 100px;
	margin: 12px 16px;
	position: absolute;
	overflow: hidden;
	top: 33%;
	left: 33%;
}
.reds {
	background-color: red;
}
.grey {
	background-color: #007aff;
}
</style>
